Organizers' Toolkit
4. Getting started with HTML5 for mobile
Everyone speaks a language. I am writing in English which has rules, vocabulary and syntax. English has a lot of words. Thankfully, when writing code there are very few "words" to learn.
In the last blog, we took a quick look at the Intel XDK New application. This blog begins our discussion of HTML5 along with its sister languages CSS3 and JavaScript.
- HTML5 organizes web and mobile content. It identifies the headings and the paragraphs, as well as bullet and number lists.
- CSS3 is used to create the look and feel of the web or mobile page. It adds color, font size, paragraph indentation, sets margins, etc.
- JavaScript adds activity to a page. For example, you can add input fields in HTML5, and then use JavaScript to create whatever action is required on the data that has been input. For example, send the data to a file or email it to someone.
Since HTML5 is the fundamental component, we will start there.
Every tag used in HTML5 starts with a left angle bracket (<) and closes with a right angle bracket (>). For example <head> and <body>
Most tags come in pairs, an opening tag and a closing tag. The closing tag starts with a slash (/). �For example, <body> </body>, <head></head>, or <p></p>.
Between the opening tag and closing tag, you place your information. For example, to create a paragraph that says, "This is my first sentence", you would enter:
<p>This is my first sentence</p>
Below is an ordered list of the first HTML5 tags we need to talk about.
<!doctype html>
<html>
<head>
Instructions go here
</head>
<body>
Page content goes here
</body>
</html>
Note: When working in HTML5, always use lowercase for your tags.
- The first tag, <!doctype html>, tells the system that this is an HTML5 page. Notice that it does not have a losing tag. This tag, including the exclamation point (!) must be the first line in your app code file.
- The <html> tag tells the system that this is the beginning of the HTML code. It has a matching code </html> which goes at the very end of the code.
- The <head> tag and its matching closing tag </head> contains instructions for the system. This information does not show on the web page or mobile page.
- The <body></body> tags enclose the actually page content. So what you put between the body tags is what you want people to see when they go to your page.
- Finally you have the closing </html> tag
Let's create something simple.
<!doctype html>
<html>
<head>
<title>The Hello Africa page</title>
</head>
<body>
<p>Hello Africa</p>
</body>
</html>
What we just created will work as both a web page and a mobile page. The content inside the <title></title> tags tells the system to show the title at the top of the window, or on the tab for the page. It is not part of the page itself. It just tells you what page you're on. For example if you look at the tab when on the Wordpress home page it says Revolution and Automation on the tab when using a tab browser.
The content inside the paragraph tags <p></p> is what will show up on the screen when this page is loaded. The <p> tag identifies the content as a paragraph.
Copy and paste the content into a Notepad file. Save the file as "hello.html" including the quotes. When you wrap the file name in quotes, Notepad knows that you want to name the file in a formation that is not a text file, so it does not add the .txt file extension. Instead it creates a file with the .html extention.
After you save the file, load the file into a browser by clicking on the file name to open it and display the content in the browser. You should see Hello Africa on the page and The Hello Africa page on the browser tab.
So, you're probably thinking, that's nice. We created a simple web page, but I thought the objective was to create mobile app.
Well you're right. That is our objective. So let's look back at the Intel XDK New application and the Hello World mobile app that we altered to say Hello Africa in the last post. (Learning to be an app developer --- Open the HelloWorld app and go to the index.html file in the left panel.)
The first thing you'll notice when you look at the app is that all the tags we just learned are there, but there are also a few more that we haven't discussed.
- There are a number of <meta> tags. These tags tell the system things. For example, the first <meta> tag documents that this file was made by Intel and has a copyright.
- Skipping the <title> tag since we discussed that already, there are then two more <meta> tags.
- The second <meta> tag <content> defines the kind of content that will be in this file. This file contains HTML5 code so it is identified this way: text/html
- The third <meta> tag <viewport> tells the mobile device how to handle the content for a mobile device screen. (When creating pages for the web you do not have to use the viewport.)
i. The content width will be the width of the device.
ii. The content initial-scale=1 ensures that the orientation can be changed from portrait to landscape and still fit the screen.
iii. The content maximum-scale=1 and user-scalable=0 both prevents the user from zooming in. (iOS uses one and Android uses the other), so make sure everything is readable.
- The two <link> items identify the CSS files that will be used to format the content.
- The two <script> items identify the JavaScript files used to make actions work, like clicking on the button.
- Inside the <body> tag you will find <div> </div> tags. These tags separate information and provide access to the CSS3 format information. The class tells the system how to format this particular piece of data. Don't worry about the classes for now. We'll talk about that later.
There are many resources on the web to help get you started with HTML5. For example the W3School site provides information on HTML Basics: http://www.w3schools.com/html/default.asp
and HTML5 which is the version of HTML you need to create mobile apps: http://www.w3schools.com/html/html5_intro.aspTake some time to look through the information this site provides. It will help you learn more about the basics.